<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>缺陷工单详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <style>
        #layer-fault-images img {
            width: 160px;
            height: 160px;
            margin: 5px;
        }

        #layer-audit-images img {
            width: 160px;
            height: 160px;
            margin: 5px;
        }

        a:hover {
            cursor: pointer;
            text-decoration: none;
        }
    </style>
</head>
<body>

<div class="layui-fluid" id="container">
    <div class="layui-card">
        <div class="layui-card-header">基本信息</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="fault-form">
                <input type="hidden" name="id">
                <div class="layui-row">
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">缺陷单号</label>
                            <div class="layui-input-block">
                                <input type="text" name="no" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">缺陷来源</label>
                            <div class="layui-input-block">
                                <input type="text" name="sourceText" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">缺陷描述</label>
                            <div class="layui-input-block">
                                <input type="text" name="content" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">缺陷设备</label>
                            <div class="layui-input-block">
                                <input type="text" name="deviceName" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">设备位置</label>
                            <div class="layui-input-block">
                                <input type="text" name="deviceLocation" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">缺陷处置</label>
                            <div class="layui-input-block">
                                <input type="text" name="faultHandleText" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">上报人</label>
                            <div class="layui-input-block">
                                <input type="text" name="reportByName" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">上报时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="reportTime" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">巡检班组</label>
                            <div class="layui-input-block">
                                <input type="text" name="teamName" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">班组长</label>
                            <div class="layui-input-block">
                                <input type="text" name="teamLeaderName" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">缺陷等级</label>
                            <div v-if="form.state!=1&&form.state!=4" class="layui-input-block">
                                <input type="text" name="auditComment" v-model="form.levelText" class="layui-input">
                            </div>
                            <div v-if="form.state==1||form.state==4" class="layui-input-block">
                                <select id="level" :value="form.level">
                                    <option value="">请选择缺陷等级</option>
                                    <option value="1">一般</option>
                                    <option value="2">严重</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.faultHandle==2" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">维修方式</label>
                            <div v-if="form.state>1" class="layui-input-block">
                                <input type="text" class="layui-input" v-model="form.repairHandleText" readonly>
                            </div>
                            <div v-if="form.state==1" class="layui-input-block">
                                <select id="repair-handle">
                                    <option value="">请选择维修方式</option>
                                    <option value="1">立即维修</option>
                                    <option value="2">稍后维修</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>4&&form.auditLocation!=''" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">审核位置</label>
                            <div class="layui-input-block">
                                <input type="text" name="auditLocation" class="layui-input" v-model="form.auditLocation"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>3" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">审核意见</label>
                            <div class="layui-input-block">
                                <input type="text" name="auditComment" v-model="form.auditComment" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>4" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">审核结果</label>
                            <div class="layui-input-block">
                                <input type="text" name="auditResultText" v-model="form.auditResultText"
                                       class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>4" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">审核人</label>
                            <div class="layui-input-block">
                                <input type="text" name="auditByName" v-model="form.auditByName" class="layui-input"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>4" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">审核时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="auditTime" v-model="form.auditTime" class="layui-input"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>4" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">审核次数</label>
                            <div class="layui-input-block">
                                <input type="text" name="auditTimes" v-model="form.auditTimes" class="layui-input"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="text" name="stateText" v-model="form.stateText" class="layui-input"
                                       readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">缺陷图片（共<span id="fault-imgs-count"></span>张）</div>
        <div class="layui-card-body">
            <div id="layer-fault-images"></div>
        </div>
    </div>
    <div v-if="form.repairId>0" class="layui-card">
        <div class="layui-card-header">维修信息</div>
        <div class="layui-card-body">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" @click="showRepair()">查看详情
            </button>
        </div>
    </div>
    <div v-if="form.auditImgs!=null" class="layui-card">
        <div class="layui-card-header">审核图片（共<span id="audit-imgs-count"></span>张）</div>
        <div class="layui-card-body">
            <div id="layer-audit-images"></div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">流程信息</div>
        <div class="layui-card-body">
            <div id="layer-activities"></div>
        </div>
    </div>
    <div style="text-align: center">
        <button class="layui-btn layui-btn-primary" v-if="form.state==1" @click="repair">确定</button>
        <button class="layui-btn layui-btn-primary" v-if="form.state==2" @click="createRepair">维修</button>
        <button class="layui-btn" v-if="form.state==4&&task.state==1" @click="audit(1)">通过</button>
        <button class="layui-btn layui-btn-danger" v-if="form.state==4&&task.state==1" @click="audit(2)">不通过
        </button>
        <button class="layui-btn layui-btn-danger" v-if="form.state>0&&form.state<5" @click="terminate()">撤销</button>
    </div>
</div>
<script id="activities-tpl" type="text/html">
    <ul class="layui-timeline">
        {{# layui.each(d, function (index, item) { }}
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h4 style="font-weight: bold;">{{item.name}}【{{item.ownerName}}】</h4>
                <p>{{item.completeTime || '待完成'}}</p>
            </div>
        </li>
        {{# }); }}
        {{# if(d.length === 0){ }}
        暂无流程数据
        {{# } }}
    </ul>
</script>
<script src="/layui/layui.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/common.js"></script>
<script src="/js/vue.min.js"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'laytpl', 'util'], function () {
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var id = getParam('id');
        var taskId = getParam('taskId');
        var alarmId = getParam('alarmId');
        layui.util.fixbar();

        new Vue({
            el: "#container",
            data() {
                return {
                    form: {
                        content: '',
                        source: 1,
                        sourceText: '人工上报',
                        alarmId: null,
                        deviceId: null,
                        deviceName: '',
                        deviceLocation: '',
                        faultHandle: null,
                        faultHandleText: '',
                        teamId: 0,
                        teamName: '',
                        teamLeaderName: '',
                        state: 0
                    },
                    task: {}
                }
            },
            mounted() {
                if (taskId) {
                    this.loadTask(taskId);
                } else if (id) {
                    this.loadForm(id);
                } else if (alarmId) {
                    //根据告警ID加载缺陷
                    this.loadFormByAlarmId(alarmId);
                }
            },
            updated() {
                form.render();
            },
            methods: {
                loadForm(id) {
                    let that = this;
                    $.get('/faults/' + id, function (result) {
                        var data = result.data;
                        that.form = data;
                        form.val('fault-form', data);
                        //加载缺陷图片
                        if (data.faultImgs) {
                            var images = data.faultImgs.split(',');
                            $("#layer-fault-images").empty();
                            for (var i in images) {
                                var img = images[i];
                                var item = '<img layer-src="/img/' + img + '" src="/img/' + img + '">';
                                $('#layer-fault-images').append(item);
                            }
                            $('#fault-imgs-count').text(images.length);
                            layer.photos({
                                photos: '#layer-fault-images',
                                anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
                            });
                        }
                        //加载审核图片
                        if (data.auditImgs) {
                            var images = data.auditImgs.split(',');
                            $("#layer-audit-images").empty();
                            for (var i in images) {
                                var img = images[i];
                                var item = '<img layer-src="/img/' + img + '" src="/img/' + img + '">';
                                $('#layer-audit-images').append(item);
                            }
                            $('#audit-imgs-count').text(images.length);
                            layer.photos({
                                photos: '#layer-audit-images',
                                anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
                            });
                        }
                        //流程信息
                        $.get('/tasks/proc-inst-tasks', {procInstId: data.procInstId}, function (res) {
                            var tpl = $('#activities-tpl').html();
                            laytpl(tpl).render(res.data, function (html) {
                                $('#layer-activities').html(html);
                            });
                        });
                    });
                },
                loadFormByAlarmId(alarmId) {
                    let that = this;
                    $.get('/device-alarms/' + alarmId, function (res) {
                        let deviceAlarm = res.data;
                        that.form.content = deviceAlarm.msg;
                        that.form.source = 2;
                        that.form.sourceText = '设备告警';
                        that.form.alarmId = deviceAlarm.id;
                        $.get('/devices/iot-code/' + deviceAlarm.deviceCode, function (result) {
                            let device = result.data;
                            if (device) {
                                that.form.deviceId = device.id;
                                that.form.deviceName = device.name;
                                that.form.deviceLocation = device.locationName;
                            }
                        })
                    });
                },
                loadTask(taskId) {
                    let that = this;
                    $.get('/tasks/' + taskId, function (res) {
                        that.task = res.data;
                        if (that.task) {
                            that.loadForm(that.task.formKey);
                        }
                        if (that.task.state == 2) {
                            layer.msg('该任务已处理');
                        }
                    });
                },
                repair() {
                    var level = $('#level').val();
                    if (!level) {
                        layer.msg('请选择缺陷等级');
                        return;
                    }
                    var repairHandle = $('#repair-handle').val();
                    if (!repairHandle) {
                        layer.msg('请选择维修方式');
                        return;
                    }
                    if (level == 2 && repairHandle == 2) {
                        layer.msg('严重缺陷必须立刻维修');
                        return;
                    }
                    let that = this;
                    $.post('/faults/repair', {
                        taskId: that.task.id,
                        id: that.form.id,
                        level: level,
                        repairHandle: repairHandle
                    }, function () {
                        //立即维修
                        if (repairHandle == 1) {
                            window.location.href = '/repair-info.html?faultId=' + that.form.id;
                        }
                        //稍后维修
                        else {
                            window.location.reload();
                        }
                    });
                },
                showRepair() {
                    var p = layer.open({
                        title: '维修详情',
                        type: 2,
                        content: '/repair-info.html?id=' + this.form.repairId,
                        area: ['640px', '640px'],
                        maxmin: true
                    });
                    layer.full(p);
                },
                createRepair() {
                    let that = this;
                    window.location.href = '/repair-info.html?faultId=' + that.form.id;
                },
                /**
                 * 审核缺陷
                 */
                audit(auditResult) {
                    let that = this;
                    let auditComment = that.form.auditComment;
                    if (auditResult == 2 && !auditComment) {
                        layer.msg('输入审核意见');
                        return;
                    }
                    $.post('/faults/audit', {
                        taskId: that.task.id,
                        id: that.form.id,
                        level: $('#level').val() || 1,
                        auditResult: auditResult,
                        auditComment: that.form.auditComment || '',
                        auditLocation: that.form.auditLocation || ''
                    }, function () {
                        layer.msg('提交成功');
                        window.location.reload();
                    });
                },
                terminate() {
                    let that = this;
                    layer.confirm('确定撤销该工单吗？', function (index) {
                        $.post('/faults/terminate', {
                            id: that.form.id
                        }, function (res) {
                            window.location.reload();
                        });
                    });
                }
            }
        })

    });
</script>
</body>
</html>